<template>
  <div class="top">
    <h4 class="caption">会前管理</h4>
      <el-switch
      v-model="value"
      active-color="#4745C5"
      inactive-color="#5E5E5E"
      class="switchStyle"
      :active-value="0"
      :width="100"
      :inactive-value="1"
      active-text="日历模式"
      inactive-text="表格模式"
      >
      </el-switch>
  </div>
</template>

<script>
export default {
data() {
  return {
    value:true
  }
},
}
</script>

<style lang="scss" >
  .top {
    display: flex;
    align-items: center;
    letter-spacing: 0;
    .caption {
      font-size: 25px;
      color: #5E5E5E;
    }
  }
  /* switch按钮样式 */
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 6px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -8px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 120px;
}
</style>